<template>
  <div>
    <div class="div1" style="margin-top: 200px" >
      <label for=""
        >账号:
        <input type="text" v-model="input1" />
      </label>
      <label for="">密码: <input type="password" v-model="input2" /> </label
      ><br />
      <el-button class="rrr" type="text"  @click="ck"
        >登录</el-button
      >

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
    };
  },
  created() {},
  computed: {},
  beforeRouteEnter (to, from, next) {
    if (!JSON.parse(localStorage.getItem("vuex")).bool) {
    next();

  } else {
    next({name:JSON.parse(localStorage.getItem("vuex")).luyou});
  }
  },
  methods: {
    ck() {
      const reg1 = /^[a-zA-Z]{3,}$/; 
      const reg = /^[a-zA-Z]{3,}|^\d{3,}$/; 
      if (!reg1.test(this.input1)) {
        alert("必须为不少于3个");
        return;
      }
      if (!reg.test(this.input2)) {
        alert("密码必须为不少于3个");
        return;
      }
      if (this.input1 == "ysd" && this.input2 == 123456) {
        this.$message({
          type: "success",
          message: "登陆成功....跳转成功!",
        });
        this.$store.commit('akk',true)
         console.log(JSON.parse(localStorage.getItem("vuex")).bool);
        this.$store.commit('luyou1','app')
        this.$router.push({ name: "app" });
      } else {
            alert('输入有误')
        
      }
    },
  },
};
</script>
<style lang="less" scoped>
  .div1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    background-color: #f5f5f5;
    width: 300px;
    height: 200px;
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  
  label {
    margin: 10px;
  }
  
  input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
  }
  
  .rrr {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .rrr:hover {
    background-color: #0062cc;
  }
</style>

